<template>
	<view class="homepage">
		<custom-header title="主页" :back="false" sticky
			bg-color="linear-gradient(90deg, #FEFEFE 0%, #FFF9EF 52%, #FEE8EA 100%);"
			border-color="transparent"></custom-header>
		<!-- 用户信息 -->
		<view class="user-info-wrap" :class="{'packer_wrap':role?.roleId == 3}">
			<view class="user-info">
				<image class="avatar" src="/static/home/tx.png" mode="aspectFit" />
				<view class="user-action">
					<view class="user-content">
						<view class="user-top">
							<text class="user-name">王二小</text>
							<view class="role-badge" @click="isShowSwitchRole = true" >
								<view class="icon">
									<image src="/static/my/role_icon.png" mode=""></image>
								</view>
								<view class="text">{{ role?.roleName }}</view>
							</view>
							<image class="switch-icon" src="/static/home/qh.png" mode="aspectFit" @click="isShowSwitchRole = true" />
						</view>
						<text class="welcome">欢迎使用亚拍花卉管理系统</text>
					</view>
					<view class="action-icons">
						<view class="icon-container">
							<view class="scan-icon" @click="handleScan">
								<image src="/static/home/smzj.png" mode="aspectFit" />
							</view>
							<view class="qr-code" @click="handleQrCode">
								<image src="/static/home/qrcode.png" mode="aspectFit" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 自检员 start -->
		<block v-if="role?.roleId == 1">
			<!-- 今日入场统计 -->
			<view class="stats-card">
				<view class="stats-header">
					<text class="stats-title">今日入场</text>
					<view class="time-selector" @click="showTimePicker1">
						<text class="time-text">{{ selectedDate1 || '选择时间' }}</text>
						<image class="arrow-icon" src="/static/home/lj.svg" mode="aspectFit" />
					</view>
				</view>
				<view class="stats-content">
					<view class="stat-item" @click="handleStatsClick('all')">
						<text class="number">2072</text>
						<text class="unit">家</text>
						<text class="label">全部</text>
					</view>
					<view class="stat-item" @click="handleStatsClick('entered')">
						<text class="number">2059</text>
						<text class="unit">家</text>
						<text class="label">已入场</text>
					</view>
					<view class="stat-item" @click="handleStatsClick('notEntered')">
						<text class="number">13</text>
						<text class="unit">家</text>
						<text class="label">未入场</text>
					</view>
				</view>
			</view>
			<!-- 功能按钮区 -->
			<view class="function-buttons">
				<view class="function-btn" @click="handlePlatformSell">
					<image class="btn-icon btn-icon1" src="/static/home/ptdm.png" mode="aspectFit" />
					<view class="btn-content">
						<text class="btn-title">平台代卖</text>
						<text class="btn-desc">平台代为销售商品</text>
					</view>
				</view>
				<view class="function-btn function-btn2" @click="handleFlowerRecommend">
					<view class="btn-content">
						<text class="btn-title">花材推荐</text>
						<text class="btn-desc">质检推荐花材</text>
					</view>
					<image class="btn-icon btn-icon2" src="/static/home/hctj.png" mode="aspectFit" />
				</view>
			</view>
		</block>
		<!-- 自检员 end -->
		
		<!-- 打包员 start -->
		<block v-if="role?.roleId == 2">
			<!-- 打包统计 -->
			<view class="stats-card">
				<view class="stats-header">
					<text class="stats-title">打包统计</text>
					<view class="time-selector" @click="showTimePicker1">
						<text class="time-text">{{ selectedDate1 || '选择时间' }}</text>
						<image class="arrow-icon" src="/static/home/lj.svg" mode="aspectFit" />
					</view>
				</view>
				<view class="stats-content">
					<view class="stat-item" @click="handleStatsClick('all')">
						<text class="number">5214</text>
						<text class="label">全部</text>
					</view>
					<view class="stat-item" @click="handleStatsClick('entered')">
						<text class="number">59</text>
						<text class="label">已打包</text>
					</view>
					<view class="stat-item" @click="handleStatsClick('notEntered')">
						<text class="number">44</text>
						<text class="label">未打包</text>
					</view>
				</view>
			</view>
		</block>
		<!-- 打包员 end -->
		
		<!-- 基地统计表格 自检员/打包员可见 -->
		<view class="table-card" v-if="role?.roleId == 1 || role?.roleId == 2">
			<view class="table-header">
				<view class="table-title-row">
					<text class="table-title">基地统计(全部)</text>
				</view>
				<view class="time-selector" @click="showTimePicker2">
					<text class="time-text">{{ selectedDate2 || '选择时间' }}</text>
					<up-icon name="arrow-down" color="#AAAAAA" size="28rpx"></up-icon>
				</view>
			</view>

			<!-- 表格 -->
			<view class="table">
				<!-- 表头 -->
				<view class="table-row header-row">
					<text class="table-cell header-cell">基地名</text>
					<text class="table-cell header-cell">降级(1254)</text>
					<text class="table-cell header-cell">退货(1119)</text>
					<text class="table-cell header-cell">换货(1119)</text>
				</view>

				<!-- 数据行 -->
				<view class="table-row" v-for="(item, index) in tableData" :key="index" @click="handleBaseClick(item)">
					<view class="table-cell base-name-cell">
						<text>{{ item.baseName }}</text>
					</view>
					<text class="table-cell">{{ item.downgrade }}</text>
					<text class="table-cell">{{ item.return }}</text>
					<text class="table-cell">{{ item.exchange }}</text>
				</view>
			</view>
		</view>
		
		<!-- 发货员 start -->
		<block v-if="role?.roleId == 3">
			<!-- 当日订单 -->
			<view class="day-order-wrap">
				<view class="box-title">
					<view class="title">
						<view class="icon">
							<image src="/static/home/line.png" mode=""></image>
						</view>
						<view class="text">当日订单</view>
					</view>
					<view class="time" @click="showTimePicker1">
						<text class="time-text">{{ selectedDate1 || '选择时间' }}</text>
						<text class="time-arrow">▼</text>
					</view>
				</view>
				<view class="nav-list-wrap">
					<view class="nav-list">
						<view class="label">全部货位</view>
						<view class="value">
							888<text class="unit">件</text>
						</view>
						<view class="icon">
							<image src="/static/home/nav01.png" mode=""></image>
						</view>
					</view>
					<view class="nav-list">
						<view class="label">
							等待发货
							<view class="paopao">
								去发货
							</view>
						</view>
						<view class="value">
							756<text class="unit">件</text>
						</view>
						<view class="icon">
							<image src="/static/home/nav02.png" mode=""></image>
						</view>
					</view>
					<view class="nav-list">
						<view class="label">自提货位</view>
						<view class="value">
							10<text class="unit">件</text>
						</view>
						<view class="icon">
							<image src="/static/home/nav03.png" mode=""></image>
						</view>
					</view>
					<view class="nav-list">
						<view class="label">已发货</view>
						<view class="value">
							28<text class="unit">件</text>
						</view>
						<view class="icon">
							<image src="/static/home/nav04.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 当日统计 -->
			<view class="day-statistics">
				<view class="box-title">
					<view class="title">
						<view class="icon">
							<image src="/static/home/line.png" mode=""></image>
						</view>
						<view class="text">当日统计</view>
					</view>
				</view>
				<view class="statistics-wrap">
					<view class="sw-item">
						<view class="value">
							8882888<text class="unit">.88元</text>
						</view>
						<view class="label">当日总运费</view>
					</view>
					<view class="sw-item">
						<view class="value">
							888<text class="unit">单</text>
						</view>
						<view class="label">发货单数</view>
					</view>
					<view class="sw-item">
						<view class="value">
							666<text class="unit">件</text>
						</view>
						<view class="label">当前打包数</view>
					</view>
					<view class="sw-item">
						<view class="value">
							111<text class="unit">单</text>
						</view>
						<view class="label">月结</view>
					</view>
					<view class="sw-item">
						<view class="value">
							222<text class="unit">单</text>
						</view>
						<view class="label">到付</view>
					</view>
					<view class="sw-item">
						<view class="value">
							666<text class="unit">单</text>
						</view>
						<view class="label">合并发货</view>
					</view>
				</view>
			</view>
			<!-- 物流统计 -->
			<view class="logistics-statistics">
				<view class="box-title">
					<view class="title">
						<view class="icon">
							<image src="/static/home/line.png" mode=""></image>
						</view>
						<view class="text">物流统计</view>
						<view class="total-text">(合计：888件)</view>
					</view>
				</view>
				<view class="logistics-list-wrap">
					<view class="list" v-for="(item,index) in logisticsList" :key="index">
						<view class="name">{{ item.name }}</view>
						<view class="number">
							{{ item.number }}
							<up-icon name="arrow-right" size="28rpx" color="#333333"></up-icon>
						</view>
					</view>
				</view>
			</view>
		</block>
		<!-- 发货员 end -->
		
		
		
		
		<!-- 时间选择器组件 -->
		<custom-select-time 
			:show="showTimeSelector" 
			:defaultDate="currentDefaultDate"
			@confirm="handleTimeConfirm" 
			@close="showTimeSelector = false" />

		<!-- 二维码弹窗 -->
		<view v-if="showQrPopup" class="qr-popup-mask" @click.self="showQrPopup = false">
			<view class="qr-popup-content">
				<view class="qr-popup-close" @click="showQrPopup = false">×</view>
				<image class="qr-popup-img" src="/static/home/qrcode.png" mode="aspectFit" />
			</view>
		</view>
		<!-- 切换身份 -->
		<custom-select 
			:show="isShowSwitchRole" 
			:datas="roleList"
			keyName="name"
			@confirm="handleSwitchRoleConfirm"
			@close="isShowSwitchRole = false"/>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from 'vue'
	import { objectToQueryString } from '../../utils/util.js'
	import { useStore } from 'vuex'
	const store = useStore()
	
	// 获取角色
	const role = computed(()=>store.getters.role)
	
	// 切换身份
	const isShowSwitchRole = ref(false)
	const roleList = ref([
		{ name:'质检员',id:1 },
		{ name:'打包员',id:2 },
		{ name:'发货员',id:3 }
	])
	const handleSwitchRoleConfirm = (data)=>{
		store.commit('SET_ROLE',{
			roleId:data.id,
			roleName:data.name
		})
	}

	// 响应式数据
	const currentPage = ref(2)
	const totalPages = ref(10)

	// 时间选择器相关
	const showTimeSelector = ref(false)
	const currentDefaultDate = ref('')
	const selectedDate1 = ref('') // 今日入场时间
	const selectedDate2 = ref('') // 基地统计时间
	const activeTimePicker = ref(1) // 1: 今日入场, 2: 基地统计

	// 二维码弹窗
	const showQrPopup = ref(false)

	// 表格数据
	const tableData = reactive([{
			baseName: '红塔基地',
			downgrade: 1,
			return: 10,
			exchange: 10
		},
		{
			baseName: '仓前基地',
			downgrade: 1,
			return: 8,
			exchange: 1
		},
		{
			baseName: '代配基地',
			downgrade: 0,
			return: 39,
			exchange: 39
		},
		{
			baseName: '春和基地',
			downgrade: 5,
			return: 9,
			exchange: 5
		},
		{
			baseName: '恩路村基地',
			downgrade: 0,
			return: 10,
			exchange: 10
		},
		{
			baseName: '未标记基地',
			downgrade: 0,
			return: 0,
			exchange: 0
		},
		{
			baseName: '摩所基地',
			downgrade: 5,
			return: 21,
			exchange: 21
		},
		{
			baseName: '寻甸基地',
			downgrade: 32,
			return: 50,
			exchange: 32
		},
		{
			baseName: '六街基地',
			downgrade: 0,
			return: 6,
			exchange: 6
		},
		{
			baseName: '代配基地',
			downgrade: 5,
			return: 9,
			exchange: 5
		}
	])

	// 显示时间选择器1（今日入场）
	const showTimePicker1 = () => {
		activeTimePicker.value = 1
		currentDefaultDate.value = selectedDate1.value || getCurrentDate()
		showTimeSelector.value = true
	}

	// 显示时间选择器2（基地统计）
	const showTimePicker2 = () => {
		activeTimePicker.value = 2
		currentDefaultDate.value = selectedDate2.value || getCurrentDate()
		showTimeSelector.value = true
	}

	// 获取当前日期
	const getCurrentDate = () => {
		const now = new Date()
		const year = now.getFullYear()
		const month = (now.getMonth() + 1).toString().padStart(2, '0')
		const day = now.getDate().toString().padStart(2, '0')
		return `${year}-${month}-${day}`
	}

	// 处理时间确认
	const handleTimeConfirm = (date) => {
		if (activeTimePicker.value === 1) {
			selectedDate1.value = date
			console.log('今日入场时间选择:', date)
		} else {
			selectedDate2.value = date
			console.log('基地统计时间选择:', date)
		}
	}
	
	const handlePlatformSell = () => {
		console.log('平台代卖')
		uni.navigateTo({
			url:'/pages/platformConsignmentSales/platformConsignmentSales'
		})
	}

	const handleFlowerRecommend = () => {
		console.log('花材推荐')
		uni.navigateTo({
			url: '/pages/recommend/recommend'
		})
	}

	// 处理扫码
	const handleScan = () => {
		uni.scanCode({
			onlyFromCamera: true, // 只允许从相机扫码
			scanType: ['qrCode', 'barCode'], // 扫码类型
			success: (res) => {
				console.log('扫码成功：', res)
				try {
					// 假设扫码结果是JSON字符串，包含花材信息
					const scanInfo = JSON.parse(res.result)
					// 跳转到推荐页面并传递参数
					uni.navigateTo({
						url: `/pages/scanRecommend/scanRecommend?scanInfo=${encodeURIComponent(JSON.stringify(scanInfo))}`,
						success: () => {
							console.log('跳转成功')
						},
						fail: (error) => {
							console.error('跳转失败：', error)
							uni.showToast({
								title: '跳转失败',
								icon: 'none'
							})
						}
					})
				} catch (error) {
					console.error('解析扫码结果失败：', error)
					uni.showToast({
						title: '无效的二维码',
						icon: 'none'
					})
				}
			},
			fail: (error) => {
				console.error('扫码失败：', error)
				if (error.errMsg.includes('cancel')) {
					// 用户取消扫码
					return
				}
				uni.showToast({
					title: '扫码失败',
					icon: 'none'
				})
			}
		})
	}

	// 处理二维码点击
	const handleQrCode = () => {
		showQrPopup.value = true
		return
		uni.scanCode({
			onlyFromCamera: true,
			scanType: ['qrCode'],
			success: (res) => {
				console.log('扫码成功：', res)
				try {
					// 解析二维码内容
					const qrInfo = JSON.parse(res.result)
					// 根据二维码内容类型进行不同处理
					if (qrInfo.type === 'flower') {
						// 如果是花材二维码，跳转到花材详情页
						uni.navigateTo({
							url: `/pages/flowerDetail/flowerDetail?info=${encodeURIComponent(JSON.stringify(qrInfo))}`,
						})
					} else if (qrInfo.type === 'supplier') {
						// 如果是供应商二维码，跳转到供应商详情页
						uni.navigateTo({
							url: `/pages/supplierDetail/supplierDetail?info=${encodeURIComponent(JSON.stringify(qrInfo))}`,
						})
					} else {
						uni.showToast({
							title: '未知的二维码类型',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('解析二维码失败：', error)
					uni.showToast({
						title: '无效的二维码',
						icon: 'none'
					})
				}
			},
			fail: (error) => {
				console.error('扫码失败：', error)
				if (error.errMsg.includes('cancel')) {
					return
				}
				uni.showToast({
					title: '扫码失败',
					icon: 'none'
				})
			}
		})
	}


	const handleBaseClick = (item) => {
		console.log('跳转到基地详情页面:', item)
		uni.navigateTo({
			url: `/pages/baseDetail/baseDetail?${objectToQueryString({...item})}`
		})
	}
	
	// 今日入场
	const handleStatsClick = (type) => {
		console.log('跳转到供应商列表页面:', type)
		uni.navigateTo({
			url: `/pages/supplierList/supplierList?type=${type}`
		})
	}
	
	// 物流统计
	const logisticsList = ref([
		{
			name:'锦亚海航空',
			number:33
		},
		{
			name:'昱泰航空',
			number:22
		},
		{
			name:'昱泰冷链',
			number:38
		},
		{
			name:'锦亚海航空',
			number:46
		},
		{
			name:'昱泰航空',
			number:55
		},
		{
			name:'昱泰冷链',
			number:44
		},
	])
</script>

<style lang="scss">
	.homepage {
		padding-bottom: 24rpx;
		// 用户信息
		.user-info-wrap{
			height: 263rpx;
			&.packer_wrap{
				height: 299rpx;
			}
			background: linear-gradient(90deg, #FEFEFE 0%, #FFF9EF 52%, #FEE8EA 100%);
		}
		.user-info {
			display: flex;
			align-items: center;
			padding: 32rpx;
			.avatar {
				width: 112rpx;
				height: 112rpx;
				border-radius: 35rpx;
				flex-shrink: 0;
			}
			.user-action{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-left: 24rpx;
			}

			.user-content {
				.user-top {
					display: flex;
					align-items: center;
					gap: 10rpx;
					margin-bottom: 6rpx;

					.user-name {
						font-size: 32rpx;
						font-weight: 500;
						line-height: 46rpx;
						letter-spacing: normal;
						color: #333333;
					}

					.role-badge {
						width: 104rpx;
						height: 37rpx;
						font-size: 20rpx;
						border-radius: 8rpx;
						color: #8D2E00;
						display: flex;
						align-items: center;
						justify-content: center;
						background: linear-gradient(90deg, #FEDA8D 0%, #FFC26C 100%);
						.icon{
							width: 20rpx;
							height: 20rpx;
							display: flex;
							margin-right: 8rpx;
						}
					}

					.switch-icon {
						width: 28rpx;
						height: 28rpx;
					}
				}

				.welcome {
					font-size: 24rpx;
					font-weight: normal;
					line-height: 35rpx;
					letter-spacing: normal;
					color: #666666;
				}
			}

			.action-icons {
				display: flex;
				align-items: center;
				.icon-container {
					display: flex;
					align-items: center;
					gap: 24rpx;

					.scan-icon,
					.qr-code {
						width: 60rpx;
						height: 60rpx;
						cursor: pointer;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}

		// 统计卡片
		.stats-card {
			margin: -80rpx 24rpx 0;
			background: #ffffff;
			border-radius: 20rpx;
			padding: 30rpx;
			.stats-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 40rpx;

				.stats-title {
					font-size: 32rpx;
					font-weight: normal;
					letter-spacing: normal;
					color: #333333;
				}

				.time-selector {
					display: flex;
					align-items: center;
					gap: 8rpx;

					.time-text {
						font-size: 24rpx;
						color: #aaaaaa;
					}

					.arrow-icon {
						width: 20rpx;
						height: 20rpx;
					}
				}
			}

			.stats-content {
				display: flex;

				.stat-item {
					flex: 1;
					text-align: center;
					// cursor: pointer;
					transition: all 0.2s ease;
					padding: 10rpx;
					border-radius: 8rpx;

					// &:hover {
					// 	background-color: rgba(245, 86, 77, 0.05);
					// }

					&:active {
						background-color: #f1f1f1;
					}

					.number {
						font-size: 1rem;
						font-weight: normal;
						line-height: 46px;
						text-align: center;
						letter-spacing: normal;
						color: #333333;
					}

					.unit {
						font-size: 24rpx;
						color: #333333;
						margin-left: 4rpx;
					}

					.label {
						display: block;
						font-size: 24rpx;
						color: #aaaaaa;
						margin-top: 10rpx;
					}
				}
			}
		}

		// 功能按钮
		.function-buttons {
			display: flex;
			gap: 20rpx;
			margin: 24rpx 24rpx 0;

			.function-btn {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #ffffff;
				border-radius: 20rpx;
				padding: 20rpx 28rpx;
				// box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.05);
				.btn-icon1 {
					width: 60rpx;
					height: 60rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}
				.btn-icon2 {
					width: 80rpx;
					height: 80rpx;
					border-radius: 10rpx;
				}

				.btn-content {
					flex: 1;
					display: flex;
					flex-direction: column;

					.btn-title {
						font-size: 28rpx;
						color: #333333;
						margin-bottom: 8rpx;
						line-height: 1.2;
					}

					.btn-desc {
						font-size: 24rpx;
						color: #bbbbbb;
						line-height: 1.3;
					}
				}
			}
			.function-btn2{
				padding-left: 48rpx;
			}
		}

		// 表格卡片
		.table-card {
			margin: 24rpx 24rpx 0;
			background: #ffffff;
			border-radius: 20rpx;
			padding: 30rpx 0;
			// box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.05);

			.table-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;
				padding: 0 28rpx;

				.table-title-row {
					display: flex;
					align-items: center;
					gap: 8rpx;

					.table-title {
						font-size: 32rpx;
						color: #333333;
					}
				}

				.time-selector {
					display: flex;
					align-items: center;
					gap: 8rpx;

					.time-text {
						font-size: 24rpx;
						color: #aaaaaa;
					}

					.arrow-icon {
						width: 20rpx;
						height: 20rpx;
					}
				}
			}

			.table {
				overflow: hidden;
				padding: 0rpx 17rpx;
				.table-row {
					display: flex;
					align-items: center;
					gap: 6rpx;
					margin-bottom: 6rpx;

					&:last-child {
						margin-bottom: 0;
					}

					&.header-row {
						background: transparent;
						height: 80rpx;

						.header-cell {
							color: #f5564d;
							font-size: 24rpx;
							border-right: none;
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 4px;
							background: #FFF4F2;
							border: 1rpx solid #FFF4F2;
							white-space: nowrap;
							overflow: hidden;
							box-sizing: border-box;
							&:last-child {
								border-right: none;
							}
						}
					}

					&:not(.header-row) {
						height: 80rpx;
						border-top: none;
						background: transparent;
						// cursor: pointer;
						transition: all 0.2s ease;

						&:hover .table-cell {
							// background-color: #e3f2fd;
						}

						&:active .table-cell {
							background-color: #f1f1f1;
						}
					}

					.table-cell {
						flex: 1.2;
						text-align: center;
						font-size: 28rpx;
						color: #666666;
						border-right: none;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 4rpx;
						background: #FFFFFF;
						border: 1rpx solid #F0F0F0;
						margin: 0;
						padding: 0;
						box-sizing: border-box;
						&:first-child {
							flex: none;
							width: 240rpx;
							text-align: center;
						}

						&.base-name-cell {
							flex: none;
							width: 240rpx;
							text-align: center;
							text {
								color: #666666;
							}

							.arrow-icon {
								width: 20rpx;
								height: 20rpx;
								opacity: 0.8;
								margin-left: 4rpx;
								flex-shrink: 0;
							}
						}
					}
				}
			}

			.pagination {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 30rpx;

				.page-btn {

					.page-icon {
						width: 102rpx;
						height: 52rpx;
					}

					text {
						font-size: 24rpx;
						color: #333333;
					}

					&.active text {
						color: #ffffff;
					}
				}

				.page-info {
					.current {
						font-size: 24rpx;
						color: #f5564d;
					}

					text {
						font-size: 24rpx;
						color: #333333;
					}
				}
			}
		}

		// 底部导航
		.bottom-nav {
			position: fixed;
			bottom: 0;
			left: 0;
			height: 120rpx;
			background: #ffffff;
			border-top: 1px solid #f0f0f0;
			display: flex;
			align-items: center;
			padding-bottom: env(safe-area-inset-bottom);

			.nav-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.nav-icon {
					width: 90px;
					height: 38px;
				}

				.nav-text {
					font-size: 20rpx;
					color: #999999;
				}

				&.active .nav-text {
					color: #ff6b35;
				}
			}
		}

		// 二维码弹窗
		.qr-popup-mask {
			position: fixed;
			z-index: 9999;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.5);
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.qr-popup-content {
			position: relative;
			background: #ffffff;
			border-radius: 20rpx;
			padding: 60rpx 40rpx 40rpx 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 0 40rpx;
		}

		.qr-popup-img {
			width: 320rpx;
			height: 320rpx;
			border-radius: 16rpx;
			background: #ffffff;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
		}

		.qr-popup-close {
			position: absolute;
			top: 15rpx;
			right: 15rpx;
			width: 50rpx;
			height: 50rpx;
			font-size: 40rpx;
			color: #999999;
			text-align: center;
			line-height: 50rpx;
			border-radius: 50%;
			background: #f5f5f5;
			z-index: 2;
			cursor: pointer;
		}
	}
	
	
	// 发货员
	.day-order-wrap{
		margin: -116rpx 24rpx 0;
		.nav-list-wrap{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.nav-list{
				width: 340rpx;
				height: 160rpx;
				border-radius: 20rpx;
				background-color: #fff;
				margin-top: 24rpx;
				position: relative;
				.label,.value{
					padding-left: 24rpx;
				}
				.label{
					font-size: 28rpx;
					color: #666666;
					padding-top: 28rpx;
					position: relative;
					.paopao{
						width: 96rpx;
						height: 39rpx;
						line-height: 32rpx;
						text-align: center;
						position: absolute;
						left: 140rpx;
						top: 10rpx;
						background: url('../../static/home/paopao.png');
						background-size: cover;
						background-repeat: no-repeat;
						font-size: 24rpx;
						color: #fff;
					}
				}
				.value{
					color: #333333;
					font-size: 36rpx;
					font-weight: bold;
					padding-top: 24rpx;
					.unit{
						font-size: 24rpx;
					}
				}
				.icon{
					width: 60rpx;
					height: 60rpx;
					position: absolute;
					right: 24rpx;
					bottom: 21rpx;
					display: flex;
				}
			}
		}
	}
	.box-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.title{
			display: flex;
			align-items:center;
			.icon{
				width: 6rpx;
				height: 30rpx;
				display: flex;
			}
			.text{
				font-size: 32rpx;
				font-weight: bold;
				color:#3D3D3D;
				margin-left:12rpx;
			}
			.total-text{
				font-size: 24rpx;
				color: #F5564D;
			}
		}
		.time{
			display: flex;
			align-items: center;
			gap: 8rpx;
			flex-shrink: 0;
			.time-text {
				font-size: 28rpx;
				color: #555;
			}
				
			.time-arrow {
				font-size: 20rpx;
				color: #555;
			}
		}
	}
	.day-statistics{
		margin: 32rpx 24rpx 0;
		.statistics-wrap{
			height: 282rpx;
			margin-top: 24rpx;
			background-color: #fff;
			border-radius: 20rpx;
			display: flex;
			flex-wrap: wrap;
			.sw-item{
				width: 33.33%;
				text-align: center;
				.value{
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
					padding-top: 32rpx;
					.unit{
						font-size: 22rpx;
					}
				}
				.label{
					font-size: 24rpx;
					font-weight: bold;
					color: #999999;
					padding-top: 12rpx;
				}
			}
		}
	}
	.logistics-statistics{
		margin: 32rpx 24rpx 0;
		.logistics-list-wrap{
			padding: 10rpx 24rpx 0;
			background-color: #fff;
			border-radius: 20rpx;
			margin-top: 24rpx;
			.list{
				padding: 24rpx 0;
				border-bottom: 1px solid #F2F2F2;
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				color: #333333;
				.number{
					display: flex;
					align-items: center;
					
				}
				&:last-child{
					border-bottom: 0;
				}
			}
		}
	}
</style>